<template>
  <div class="class-option">
    <van-tabs v-model:active="active" swipeable @touchmove.stop="void(null)">
      <van-tab title="最多播放"></van-tab>
      <van-tab title="最近更新"></van-tab>
      <van-tab title="最近上映"></van-tab>
    </van-tabs>
    <div>
        <van-tabs v-model:active="typeActive" swipeable @touchmove.stop="void(null)">
          <van-tab title="全部"></van-tab>
          <van-tab title="剧情"></van-tab>
          <van-tab title="情感"></van-tab>
          <van-tab title="励志"></van-tab>
          <van-tab title="喜剧"></van-tab>
          <van-tab title="爱情"></van-tab>
          <van-tab title="动作"></van-tab>
          <van-tab title="恐怖"></van-tab>
          <van-tab title="恐怖11"></van-tab>
          <van-tab title="恐怖22"></van-tab>
          <van-tab title="恐怖333"></van-tab>
        </van-tabs>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  name: 'FissionFriendsH5ClassOption',
  setup() {
    const active = ref(0)
    const typeActive = ref(0)

    return { active, typeActive }
  }
}
</script>

<style lang="scss" scoped>
.custom-indicator {
  position: absolute;
  right: 5px;
  bottom: 5px;
  padding: 2px 5px;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.1);
}
.class-swipe {
  height: 200px;
}
</style>
